<template>
	<view class="content">
		<uni-section title="二手物品详情" type="line">
			<uni-swiper-dot :info="ImgSrcs" :current="current" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in ImgSrcs" :key="index">
						<view class="swiper-item">
							<img @click="clickImg(index, ImgSrcs)" style="width: 100%; height: 600px;"
								:src="imgBaseUrl + item" alt="图片">
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<uni-list>
				<uni-list-item title="名称" :note="usedGoods.articlesName" />
				<uni-list-item title="详情" :note="usedGoods.articlesInfo" />
				<uni-list-item title="类型" :note="usedGoods.articlesType" />
				<uni-list-item title="原价" :note="usedGoods.articlesOriginalPrice + '￥'" />
				<uni-list-item title="二手价" :note="usedGoods.articlesSecondHandPrice + '￥'" />
				<uni-list-item title="发布时间" :note="usedGoods.articlesReleaseTime" />
			</uni-list>
		</uni-section>
		<uni-section title="联系卖家进行购买" type="line">
			<uni-list>
				<uni-row class="demo-uni-row">
					<uni-col :span="19">
						<uni-list-item title="卖家QQ号" :rightText="QQ" />
					</uni-col>
					<uni-col :span="5">
						<view class="tag-view">
							<uni-tag text="复制qq号" @click="copyText(QQ)"
								custom-style="background-color: #4335d6; border-color: #4335d6; color: #fff;">
							</uni-tag>
						</view>
					</uni-col>
				</uni-row>
			</uni-list>
		</uni-section>
		<uni-section title="卖家基本信息" type="line">
			<uni-list>
				<uni-list-item title="卖家昵称" :rightText="sellerInfo.nickname" />
				<uni-list-item title="卖家所在高校" :rightText="sellerInfo.university" />
				<uni-list-item title="卖家所在高校学院" :rightText="sellerInfo.college" />
			</uni-list>
		</uni-section>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import baseUrl from '../publicData/baseUrl.js'

	export default {
		name: "itemDetails",

		data() {
			return {
				current: 0,
				mode: 'round',
				imgBaseUrl: '',
				usedGoods: {},
				ImgSrcs: [],
				QQ: ''
			}
		},

		computed: {
			...mapState('publicModule', ["token"]),
			...mapState('usedGoodsModule', ["sellerInfo"]),
		},

		onLoad(option) {

			const that = this

			// 接收物品数据
			this.usedGoods = JSON.parse(option.usedGoods)
			this.ImgSrcs = JSON.parse(this.usedGoods.articlesImgSrcs)
			this.imgBaseUrl = baseUrl.imgBaseUrl

			// 获取卖家基本信息
			that.getSellerInfo({
				uId: that.usedGoods.uId,
				token: that.token
			})
			
			// 设置 QQ 号
			// 解决 peError: Cannot read properties of undefined (reading 'split')
			setTimeout(() => {
				that.QQ = that.sellerInfo.QQMail.split("@")[0]
			}, 200)
		},

		methods: {

			...mapActions('usedGoodsModule', ["getSellerInfo"]),
			...mapMutations('publicModule', ["copyText"]),

			// 改变当前点索引
			change(e) {
				this.current = e.detail.current;
			},

			// 点击图片放大预览
			clickImg(index, ImgSrcs) {
				const that = this
				let Imgs = ImgSrcs.map(item => {
					return that.imgBaseUrl + item
				})
				wx.previewImage({
					urls: Imgs, //需要预览的图片 http 链接列表，多张的时候，url直接写在后面就行了
					current: Imgs[index], // 当前显示图片的 http 链接，默认是第一个
				})
			}


		}

	}
</script>

<style scoped lang="scss">
	.tag-view {
		margin-top: 11px;
	}

	.swiper-box {
		height: 500px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 500px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}
</style>